import { useEffect, useState } from 'react';
import {
  Button,
  Form,
  Input,
  message,
  Select,
  Modal
} from 'antd';
import { Administratorrole, AdministratorAdd } from '../apis/administrator/index'
import Addstyle from '../assets/scss/Administrator/Add.module.scss'
const layFrom = {
  labelCol: { span: 5 }
}

const MyAdminFrom = (props: any): JSX.Element => {

  const Edites = props.Edit

  console.log(props.Edit);


  // 角色参数
  const header = {
    page: 1,
    psize: 10000,
  }

  // 角色列表数组
  const [Adminislsit, headerlists] = useState([])

  // 表单
  const [loginform] = Form.useForm();


  // 点击确定
  const onForm = async (values: any) => {
    console.log(values);
    if (Edites.id) {
      values.id = Edites.id
      const res: any = await AdministratorAdd(values)
      console.log(res);
      message.open({
        type: 'success',
        content: '编辑成功',
      });
      props.onForm(onForm)
    } else {
      const res: any = await AdministratorAdd(values)
      console.log(res);

      message.open({
        type: 'success',
        content: '添加成功',
      });
      props.onForm(onForm)
    }
    loginform.resetFields();
  };



  // 获取角色列表
  const GetAdministratorrole = async () => {
    const res: any = await Administratorrole(header)
    console.log(res);
    headerlists(res.data.list)
  }


  // 对话框是否显示
  let isModalOpen = props.isMod;

  const Fromsem = () => {
    loginform.resetFields();
    props.feromsem(Fromsem, loginform)
    isModalOpen = false
  };

  useEffect(() => {
    GetAdministratorrole()
  }, [])


  // 回显
  useEffect(() => {
    if (Edites) {
      loginform.setFieldsValue({
        username: Edites.username,
        pass: Edites.pass,
        name: Edites.name,
        tel: Edites.tel,
        typeid: Edites.typeid
      })
    }
  }, [Edites])

  return (
    <div>

      <div >
        <Modal title="管理员" footer={null} open={isModalOpen} onCancel={Fromsem} >
          <Form style={{ maxWidth: 420 }} {...layFrom} form={loginform} className={Addstyle.form} onFinish={onForm}>
            <Form.Item label="账号" name='username' rules={[{ required: true, message: '账号不能为空!' }]}>
              <Input className={Addstyle.Input} placeholder='关键字' />
            </Form.Item>

            <Form.Item label="密码" name='pass' rules={[{ required: true, message: '密码不能为空!' }]}>
              <Input.Password className={Addstyle.Input} placeholder='关键字' />
            </Form.Item>

            <Form.Item
              name="checkPass"
              label="确认密码"
              dependencies={['pass']}
              hasFeedback
              className={Addstyle.Input}
              rules={[
                {
                  required: true,
                  message: '两次密码不一致!',
                },
                ({ getFieldValue }) => ({
                  validator(_, value) {
                    if (!value || getFieldValue('pass') === value) {
                      return Promise.resolve();
                    }
                    return Promise.reject(new Error('两次密码不一致!'));
                  },
                }),
              ]}
            >
              <Input.Password />
            </Form.Item>


            <Form.Item label="姓名" name='name' rules={[{ required: true, message: '姓名不能为空!' }]}>
              <Input className={Addstyle.Input} placeholder='关键字' />
            </Form.Item>


            <Form.Item label="联系方式" name='tel' rules={[{ required: true, message: '联系方式不能为空!' }]}>
              <Input className={Addstyle.Input} placeholder='关键字' />
            </Form.Item>


            <Form.Item className={Addstyle.Input} label="角色" name='typeid' rules={[{ required: true, message: '角色方式不能为空!' }]} >
              <Select placeholder="请选择" >
                {
                  Adminislsit.map((item: any) => (
                    <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>
                  )
                  )
                }
              </Select>
            </Form.Item>

            <div className={Addstyle.Button}>
              <Button type="primary" htmlType="submit">
                确定
              </Button>
            </div>
          </Form>
        </Modal>
      </div>
    </div>
  )
}
export default MyAdminFrom;